<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="admin-com-images">
    <div class="clearfix top-bar">
      <slot/>
      <w-search-bar
        v-if="searchBar"
        class="w-float-right"
        ref="WSearchBar"
        @search="searchBtnClick"/>
    </div>
    <ul class="images-box clearfix">
      <li
        v-for="(v, k) in loadListModel.dataArr"
        :key="v.name"
        @click="imageClick(v[urlP])"
        class="item w-image-fill w-pointer w-hover-glow"
        v-lazy:background-image="v[urlP]">
        <i
          @click.stop="removeBtnClick(v, k)"
          class="el-icon-close clear"/>
      </li>
    </ul>
    <!--底部加载更多-->p'p
    <w-load-more :load-model="loadListModel"/>
    <w-viewer ref="IMAGE_SHOW"/>
  </div>
</template>

<script>
  import OSSListLoad from '@/models/oss/OSSListLoad'
  import WLoadMore from '@/components/global/loadMore'
  import WViewer from '@/components/global/viewer/index'
  import WSearchBar from '../searchBar/dayOrMonth'
  export default {
    name: 'AdminComImages',
    components: {
      WLoadMore,
      WViewer,
      WSearchBar
    },
    props: {
      bucket: {
        type: String,
        default: ''
      },
      prefix: {
        type: String,
        default: ''
      },
      /**
       * 显示的图片字段
       */
      urlP: {
        type: String,
        default: ''
      },
      /**
       * 是否显示搜索框
       */
      searchBar: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        /**
         * 列表加载模型
         */
        loadListModel: new OSSListLoad()
      }
    },
    created() {
      this.loadListModel.prefix = this.prefix
      this.loadListModel.bucket = this.bucket
    },
    watch: {
      /**
       *  prefix改变的时候调用
       */
      prefix() {
        this.loadListModel.prefix = this.prefix
        this.reloadData()
      }
    },
    methods: {
      /**
       * 查找按钮点击
       */
      searchBtnClick(dateStr) {
        this.loadListModel.prefix = `${this.prefix}${dateStr}`
        this.reloadData()
      },
      /**
       * 图片点击
       * @param url
       */
      imageClick(url) {
        this.$refs['IMAGE_SHOW'].show([url])
      },
      /**
       * 删除按钮点击
       * @param v
       * @param k
       */
      removeBtnClick(v, k) {
        this.$w_remove_pop(() => {
          return v.removeData(this.bucket)
        }, '该图片').then(() => {
          this.loadListModel.removeWithIndex(k)
        }).catch(() => {})
      },
      /**
       * 重新加载
       */
      reloadData() {
        this.loadListModel.clearData()
        this.loadListModel.loadData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-com-images {
    >.top-bar {
      margin-bottom: 10px;
    }
    >.images-box {
      list-style: none;
      margin: 0;
      padding: 0;
      >.item {
        width: 200px;
        height: 200px;
        border: 1px dashed #ccc;
        margin: 10px;
        float: left;
        position: relative;
        border-radius: 10px;
        >.clear {
          background-color: rgba(3,3,3,.3);
          position: absolute;
          right: 5px;
          font-size: 20px;
          top: 5px;
          color: #ddd;
          padding: 2px;
          border-radius: 50%;
        }
        >.clear:hover {
          color: #fff;
          background-color: rgba(255,3,3,.8);
        }
      }
    }
  }
</style>
